<template>
  <div class="page-container">
    <div class="operators">
      <el-select
        v-model="searchParams.partnerId"
        @change="unusualLogsApi"
        style="width: 200px; margin-right: 10px"
        clearable
        placeholder="请选择设备组"
      >
        <el-option
          v-for="(item, index) in machines"
          :key="index"
          :label="item.partnerName"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="unusualLogsApi">查询</el-button>
      <el-button type="danger" @click="clearApi">清空日志</el-button>
    </div>
    <el-table
      :data="tableData"
      :height="tableHeight"
      style="width: 100%; margin-bottom: 20px"
      align="center"
      border
    >
      <el-table-column prop="partnerName" label="设备组名称"></el-table-column>
      <el-table-column prop="statusName" label="设备组状态"></el-table-column>
      <el-table-column
        prop="monitorNumsUnusualDate"
        label="车辆数量异常时间"
      ></el-table-column>
      <el-table-column
        prop="monitorSecondsDate"
        label="通行时间异常时间"
      ></el-table-column>

      <el-table-column width="160" prop="createDate" label="创建时间">
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.currentPage"
        :page-sizes="[10, 20, 50, 80]"
        :page-size="searchParams.pageSize"
        :total="count"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  monitorPartnersList,
  unusualLogs,
  unusualClear,
} from "@/api/videos/monitorPartners";

import { autoTableHeight } from "@/utils/tools";
export default {
  data() {
    return {
      searchParams: {
        partnerId: "",
        ip: "",
        currentPage: 1,
        pageSize: 10,
      },
      formData: {},
      monitorPartnersVisible: false,
      tableData: [],
      count: 0,
      tableHeight: 600,
      unitOpts: [],
      unitIndex: undefined,

      machines: [],
    };
  },
  created() {
    autoTableHeight(280, (e) => {
      this.tableHeight = e;
    });
    this.monitorPartnersListApi();
    this.unusualLogsApi();
  },
  methods: {
    clearApi() {
      let { partnerId } = this.searchParams;
      if (!partnerId) {
        this.$message.error("请选择需要删除日志的设备组");
        return;
      }
      let cur = this.machines.filter((item) => item.id == partnerId)[0];
      this.$confirm(
        `此操作将永久删除${cur.partnerName}"设备组】的日志, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        unusualClear({
          partnerId,
        }).then((res) => {
          this.$message.success("成功清空日志");
          this.unusualLogsApi();
        });
      });
    },
    monitorPartnersListApi() {
      monitorPartnersList({ ip: "" }).then((res) => {
        this.machines = res.data.data;
      });
    },
    unusualLogsApi() {
      let data = { ...this.searchParams };
      unusualLogs(data).then((res) => {
        let { data, count } = res.data;
        this.count = count;
        this.tableData = data;
      });
    },
    handleSizeChange(val) {
      this.searchParams.pageSize = val;
      this.unusualLogsApi();
    },
    handleCurrentChange(val) {
      this.searchParams.currentPage = val;
      this.unusualLogsApi();
    },
  },
};
</script>

<style scoped>
.operators {
  margin-bottom: 16px;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
}
.el-cascader {
  width: 100%;
}
.dialog-btns {
  text-align: center;
}
</style>
